<template>
    <div>
        <div class="table-data" v-show="tabShow">
            <div class="search-box">
                <el-input size="small" v-model="searchMap.username" placeholder="姓名"></el-input>
                <el-input size="small" v-model="searchMap.mobile" placeholder="手机号"></el-input>
                <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
            v-loading="loading"
            element-loading-text="正在加载"
            element-loading-spinner="el-icon-loading" :data="tableData"  style="width:100%"  class="table-box">
            <el-table-column label="openid" prop="wx_cm_openid"></el-table-column>
            <el-table-column label="用户信息" prop="title">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.wx_avator"></el-image>
                    <span>{{scope.row.wx_nickname}}</span>
                </template>
            </el-table-column>
            <el-table-column label="员工姓名" prop="username" ></el-table-column>
            <el-table-column label="手机号" prop="mobile" ></el-table-column>
            <el-table-column label="职位" prop="department[0]" ></el-table-column>
            <el-table-column label="所属部门" prop="position" ></el-table-column>
<!--            <el-table-column label="推送储值金额" prop=""></el-table-column>-->
            <el-table-column label="消费储值金额" prop="consume"></el-table-column>
            <el-table-column label="剩余储值金额" prop="amount"></el-table-column>
<!--            <el-table-column label="储值消费次数" prop=""></el-table-column>-->
            <el-table-column label="加入时间" prop="created_at"></el-table-column>
                <el-table-column label="状态" prop="status_str" width="60"></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" v-if="scope.row.status == '1'" @click="handleChange(scope.row, 2)">禁用</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.status == '2'" @click="handleChange(scope.row,1)">启用</el-button>
                    <router-link :to="{name:'employeeDetail',query:{id:scope.row.id}}" @click.native="handleAmountRecord()" class="user-detail el-button el-button--primary el-button--mini">明细</router-link>
                    <el-button size="mini" type="primary" @click="handleAmount(scope.row, 2)">推送储值</el-button>
                    <el-button size="mini" type="primary" @click="handleAmount(scope.row, 5)">扣除储值</el-button>
                    <el-button size="mini" type="primary" @click="handlePass(scope.row)">支付密码设置</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="pages" ref="page-box">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10,30,50]"
                :page-size="size"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
            ></el-pagination>
            </div>
        </div>
        <router-view @loadData="loadData"></router-view>
        <EditDialog :isEdit="isEdit" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
        <PassEditDialog :isChange="isChange" :form="passData" @closeDialog="closeDialog" @loadData="loadData"></PassEditDialog>
    </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import PassEditDialog from "./PassEditDialog.vue";
import staffManag from "@/api/staffManag";

@Component({
  components: { EditDialog,PassEditDialog}
})
export default class frontPageStyle extends Vue {

    @Provide() tableData: any = []; // 表格数据
    @Provide() page: number = 1; // 当前page
    @Provide() size: number = 10; // 请求数据的个数 默认5
    @Provide() total: number = 0; // 总数据条数
    @Provide() loading: Boolean = true; // 是否显示加载图标

    @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
    @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
    @Provide() isChange: Boolean = false; // 是否展示修改密码弹窗
    @Provide() dialogVisible: Boolean = false; // 是否展示编辑页面
    @Provide() tabShow: Boolean = true; // 是显示否列表页面

    @Provide() searchMap: any = { // 搜索内容
        keyword:'',
        begin_time:'',
        end_time:'',
        status:'',
        id:''
    };

    @Provide() formData: any = { // 操作内容
        id:"",
        type: "",
        amount: "",
        remark:""
    };
    @Provide() passData: any = { // 修改密码操作
        id:"",
        password: "",
    };
    @Prop({}) tabVisible!: any;

    @Watch("$route") handleRouteChange(to: any,form:any) {
        if(form.path!='/employeeList'){
            this.tabShow=this.tabVisible;
        }
    }
    created() {
        this.loadData();
    }
    loadData() {
        staffManag.employeeList(this.page,this.size, this.searchMap)
        .then((res: any) => {
            console.log(res.data)
            if(res.data.code==200) {
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;
                this.loading = false
            }
            
        });
    }
    handleSizeChange(val: number): void {
        this.size = val;
        this.page = 1;
        this.loadData();
    }
    handleCurrentChange(val: number): void {
        this.page = val;
        this.loadData();
    }
    // 点击搜索
    handleSearch() {
        this.page = 1;
        this.loadData();
    }

    handleChange(row, status) { // 修改状态
        this.loading = true
        staffManag.employeeChange({id:row.id,status:status})
            .then((res: any) => {
                this.loading = false;
                this.loadData();
            });
    }

    handlePass(row) { // 修改密码
        this.isChange = true;
        this.passData.id= row.id;
        this.passData.password = '';
    }

    // 充值|扣除
    handleAmount(row:any, i:number){
        this.formData.type = i;
        this.isEdit = true;
        this.formData.id= row.id;
        this.formData.amount = '';
        this.formData.remark = '';
    }

    handleAmountRecord() { // 储值明细
        this.tabShow=false
    }

    closeDialog() { // 关闭
        this.isAdd=false
        this.isEdit=false
        this.isChange=false
    }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.add {
    padding: 10px;
    
}
.el-input {
    width: 198px; 
}
.el-button {
    margin-left: 10px;
    margin-top: 10px;
}

</style>